<template>
	<view class="">
		<view class="tabs">
			<up-tabs :list="list1" style="width: 100%;" :lineWidth='40' :itemStyle="{color:'black',height:'88rpx'}"
				lineColor='#5ecf9a' :scrollable='false'></up-tabs>
		</view>
		<view class="message">
			<view class="message-box" @click="pathUrl()">
				<view class="">
					<up-icon name="volume" size="24">
						
					</up-icon>
					<view class="box">
						<up-badge max="99" :show="true" :offset=[-33,-8] :absolute="true" :value="0"></up-badge>
					</view>
				</view>
				<view class="text">
					<view class="top">
						公告
					</view>
					<view class="bottom">
						<view>暂无公告</view>
						<view>{{formattedDate()}}</view>
					</view>
				</view>
			</view>
			<view class="message-box" @click="pathUrl()">
				<view class="">
					<up-icon name="play-circle" size="24"></up-icon>
					<view class="box">
						<up-badge max="99" :show="true" :offset=[-33,-8] :absolute="true" :value="0"></up-badge>
					</view>
				</view>
				<view class="text">
					<view class="top">
						视频会话
					</view>
					<view class="bottom">
						<view>暂无视频会话</view>
						<view>{{formattedDate()}}</view>
					</view>
				</view>
			</view>
			<view class="message-box" @click="pathUrl()">
				<view class="">
					<up-icon name="order" size="24"></up-icon>
					<view class="box">
						<up-badge max="99" :show="true" :offset=[-33,-8] :absolute="true" :value="0"></up-badge>
					</view>
				</view>
				<view class="text">
					<view class="top">
						任务发布
					</view>
					<view class="bottom">
						<view>暂无任务发布</view>
						<view>{{formattedDate()}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue"
	const list1 = reactive([{
		name: '消息(0)'
	}, {
		name: '代办(0)'
	}])
	// 格式化时间
	const formattedDate = () => {
		const date = new Date();
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		const formattedDate = `${year}-${month}-${day}`;
		return formattedDate;
	}
	// 跳转
	const pathUrl = ()=>{
		uni.navigateTo({
			url:'/pages/my/missionCenter/missionCenter'
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
	}

	.tabs {
		background-color: white;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.message {
		margin-top: 20rpx;
		padding: 10rpx;
		height: 82vh;
		background-color: white;

		.message-box {
			padding: 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			.text {
				flex: 1;
				font-size: 28rpx;
				margin-left: 20rpx;

				.top {
					font-weight: bold;
				}

				.bottom {
					width: 100%;
					display: flex;
					color: gray;
					font-size: 24rpx;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}

	.box {
		// width: 200rpx;
		// height: 200rpx;
		position: relative;
		background-color: #909193;
		border-radius: 30rpx;
	}
</style>